<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
	  <h1>TagsEditor widget</h1>
	  <p>
		  This is an attempt to partially reimplement the Sun UC tagging widget from KiWi, letting users
		  to attach free and controlled tags to a resource.
	  </p>
	  <p>
		  It is based on the general LMF Tag and Tagging Web Services and further adds the
		  notion of taxonomy prefixes.
	  </p>
	  <p>
		  The widget is implemented as a web browser jQuery UI component, using
		  "same domain XHR" web service invocations.
	  </p>

	  <h2>Embedding widget inline (same domain)</h2>
	  <p>
		  In standard use cases, e.g. as part of an extended LMF platform, the widget
		  would be embedded inline in e.g. a CMS system. This can be simply done
		  with the following code snippet. Obviously, the limitation of such
		  deployment is that the widget has to be deployed in the same domain
		  as the LMF tagging web services. However, this way, the UI of the widget can be
		  better integrated with the UI of the embedding system.
	  </p>
	  <p>
		  While generally, the widget would take the current URL as
		  the resource URL, here we provide a text field that let's
		  you provide a different URL (set to widget via options):<br/>
		  <input type="text" id="resourceURI" size="50"/><input type="button" value="Set" onclick="resetInlineWidget()"/>
		  <br/>
		  <span style="color:red">Due to a bug, the widget does not work with other URLs then those with */resource/* URL.
		  Hence click the Set button above to make the widget work with such URL.
		  </span>
	  </p>
	  <p>
		  The result is shown here below:
	  </p>
		<script type="text/javascript" src="../../../../admin/js/jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="../../../../admin/js/jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js"></script>
		<script type="text/javascript">
			// Just a demo setup, prefill the text field abouve with
			$(document).ready(function(){
				var resourceURI = "http://" + window.location.host + "/KiWi2/resource/test123";
				console.log(resourceURI);
				$("#resourceURI").attr("value", resourceURI);
			});

			function resetInlineWidget(){
				$("#container").data("TagsEditor").destroy();
				$("#container").TagsEditor({
					resourceURI : $("#resourceURI").attr("value")
				});
			}

		</script>

	  <!-- ////////////
		   // Inline embedding example
		   ////////////
	   -->
		<!-- The TagsEditor is a jquery widget. Need to include jQuery and jQuery UI
			 Note: Although we include jQuery above, including it here again, just for clarity of the example
		-->
		<script type="text/javascript" src="../../../../admin/js/jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="../../../../admin/js/jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js"></script>

		<!-- Now the TagsEditor script and CSS file; The widget is actually splitted into two widgets.
			 The HierarchyBrowser is an independent browser for SKOS taxonomies (without the input text field),
			 while TagsEditor is a compound widget that adds a tags list, a text field and ability to add and remove tags.

			 Note: Generally, the <link> tag should be within <head>.
		-->
		<script type="text/javascript" src="../TagsEditor.js"></script>
		<script type="text/javascript" src="../HierarchyBrowser.js"></script>
		<link rel="stylesheet" href="../TagsEditor.css" type="text/css"/>

		<!-- And here is the initialization -->
		<script type="text/javascript">
			$(document).ready(function(){
				$("#container").TagsEditor({});
			});
		</script>
		<div id="container" style="width:400px;height:200px;border:1px dashed gray;"></div>
	  <!-- /////////////////
		   /////// End of inline embedding example
		   //////////////
	   -->


	  <!-- ////////////
		   // Please see the source of 
		   ////////////
	   -->

	  <h2>Embedding widget in IFrame (across domains)</h2>
	  <p>
		  If web services are deployed in a different domain, the widget
		  may be embedded in an IFrame. This way, the widget keeps invoking
		  the LMF within same domain. However, there are limitations on
		  the UI integration (e.g. no shared CSS).
	  </p>
	  <p>
		  To demonstrate this deployment, two options have been developed:
	  </p>

	  <h3>1. Greasemonkey user script</h3>
	  <p>
		  <a href="https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/" target="_blank">Greasemonkey</a>
		  is a Firefox addon that let's you install and run "user scripts"
		  within other pages normally out of your control. The following
		  user script adds IFrame embedded TagsEditor widget into pages served
		  from oracle.com and readwriteweb.com.
		  <br/>
		  <span style="color:red">Note: The user script is hardcoded to work with localhost:8080 only.</span>
	  </p>
	  <p>To play with this:</p>
	  <ol>
		  <li>Install <a href="https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/" target="_blank">Greasemonkey</a>
				Firefox addon</li>
		  <li><a href="install-LMF-TagsEditor.user.js">Install Greasemonkey script</a></li>
		  <li><a href="http://www.oracle.com" target="_blank">Visit a 3rd party site and observe the widget to be embedded (across domains)</a></li>
	  </ol>
	  <h3>2. Bookmarklet</h3>
	  <p>
		  Bookmarklet let's you play with the cross-domain TagEditor in other browsers.
		  <br/>
		  <span style="color:red">Note: The bookmarklet is hardcoded to work with localhost:8080 only.</span>
		  <br/>
		  To play with this:
	  </p>
	  <ol>
		  <li>Drag and drop this bookmarklet - <a id="bookmarklet" href="index.html#">LMF TagEditor</a> - to your bookmarks bar</li>
		  <li>Visit a 3rd party website</li>
		  <li>Click the bookmarklet in your bookmarks bar</li>
		  <li>The TagEditor widget is added to the page</li>
	  </ol>
		  
		<script type="text/javascript">
			$(document).ready(function(){
				// Generate the bookmarklet code
				var script = "(function(){var el=document.createElement('script');\
el.type='text/javascript';\
el.src= 'http://localhost:8080/KiWi2/social/widgets/tagging/hacksAndDemos/install-LMF-TagsEditor.js';\
document.body.appendChild(el);})();";

				$("#bookmarklet").attr("href", "javascript:" + encodeURIComponent(script));
			});
		</script>

		<hr/>
		<h1>Oracle demo specifics</h1>
		<p>
			In order to get TagsEditor fully working, including the hierarchy browsing
			and prefixes, you need to do the following:
		</p>
		<ol>
			<li>E.g. using Firefox REST client addon, import the following N3
				into http://localhost:8080/KiWi2/import</li>
			<pre>@prefix ssconcept: &lt;http://sunspace.sfbay.sun.com/concepts/&gt;.

ssconcept:Geo_Category &lt;http://www.oracle.com/KiWi/hasPrefix&gt; "geo".
ssconcept:Industry_Category &lt;http://www.oracle.com/KiWi/hasPrefix&gt; "ind".
ssconcept:Product_Category &lt;http://www.oracle.com/KiWi/hasPrefix&gt; "prd".</pre>
			</pre>
			<li>Import the Sun/Oracle taxonomies<br/>
			Due to IP restrictions, only the GEO is included here - <a href="sunspace_geo_top_renamed.n3" target="_blank">sunspace_geo_top_renamed.n3</a>
			</li>
		</ol>
  </body>
</html>
